<template>
  <div :style="{ width: '100%', height: '95%' }" ref="contrast"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    echarth() {
      let myChart = this.$echarts.init(this.$refs.contrast);

      let index = 0;
      var colorList = [
        "#73DDFF",
        "#73ACFF",
        "#FDD56A",
        "#FDB36A",
        "#FD866A",
        "#9E87FF",
        "#58D5FF",
      ];

      var fontColor = "#fff";
      var data = [
        {
          name: "18岁以下",
          value: 456,
        },
        {
          name: "18-30岁",
          value: 231,
        },
        {
          name: "30-45岁",
          value: 121,
        },
        {
          name: "45-60岁",
          value: 45,
        },
        {
          name: "60-70岁",
          value: 154,
        },
        {
          name: "70岁以上",
          value: 67,
        },
      ];

      let option = {
        color: colorList,
        title: {
          text: 7789,
          subtext: "总人口数",
          textStyle: {
            color: "#061930",
            fontSize: 24,
          },
          subtextStyle: {
            fontSize: 18,
            color: ["#ff9d19"],
          },
          x: "23%",
          y: "center",
        },
        grid: {
          bottom: 100,
          left: 100,
          right: "10%",
        },
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{b}<br/> {c}亿元 +  ({d}%)",
        // },
        legend: {
          orient: "vertical",
          right: 0,
          textStyle: {
            color: "#12337a",
            fontSize: 10,
          },
          icon: "roundRect",
          data: data,
          formatter: function (name) {
            var total = 0;
            var target;
            for (var i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            return name + "：" + target +"人";
          },
        },
        series: [
          // 主要展示层的
          {
            radius: ["60%", "90%"],
            center: ["35%", "55%"],
            type: "pie",
            label: {
              position: "inner",
              formatter: "{d}%",
            },
            labelLine: {
              normal: {
                show: true,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: true,
              },
            },
            data: data,
          },
        ],
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  mounted() {
    this.$nextTick(()=>{
    this.echarth();


    })
    this.resizefun = () => {
      this.$echarts.init(this.$refs.contrast).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
};
</script>

<style>
/* .app{
  background: #061930;
} */
</style>